<%@page import="tianqi.entity.UserY"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<title>田奇-晒单模块</title>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="css/shareOrder.css">
    	<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    	<script type="text/javascript" charset="utf-8" src="js/jquery-1.11.3.js"></script>
    	<script type="text/javascript" charset="utf-8" src="js/jquery.form.js"></script>
    	<script type="text/javascript" charset="utf-8" src="js/bootstrap.min.js"></script>
	</head>
<body>
	 <div id="header" class="clear">
	 	<div class="mark1 lf">
	 		<img id="touxiang" width="90" height="90" style="border-radius:50%;" src="${user.txImg!=null?user.txImg:'1' }"></img>
	 	</div>
        
        <p class="lf" style="margin-top: 15px;"><a href="#" style="color:#fff;">尊敬的: <span id="uname">${user.uname } </span>,您好！欢迎来到晒单页面。</a></p>
		
		<form action="" id="tx" ><a href="javascript:;" class="file">选择头像
    		<input type="file" onchange="tx();" name="imgsFile"/>
		</a></form>
    </div>
    <div id="order">
        <h3>请选择 您要晒出的商品: </h3>
         
        <ul class="clear">
        	<c:forEach items="${od}" var="o">
            <li>
                <img src="${o.proImg }" width="80" height="80" alt="${o.proCall }" title="${o.proCall }"/>
                <input id="soSpec" type="hidden" value="${o.proSpec }"/>
                <input id="soProid" type="hidden" value="${o.proId }"/>
                <input id="soOrderid" type="hidden" value="${o.orderid }"/>
                <input id="soProname" type="hidden" value="${o.proCall }"/>
            </li>
            </c:forEach>
        </ul>
    </div>
    <div id="section" class="">
        <div id="div"><span>请输入你想说的话内容...</span></div>
    </div>
    <form action="" id="forms" enctype='multipart/form-data' method='post'><input type="file" name="imgsFile" class="btn btn-default" value="选择图片" onchange="uplodeImg();" style="position:relative;left:0px;right:45px;"/></form>
    <ul id="saveImg" class="clear">
    </ul>
    <div id="footer" >
        <div class="btn btn-info rt" style="margin-left: 6px;margin-right: 0px;" onclick="toIndex();">取消</div>
        <div class="btn btn-primary rt" onclick="tj();">提交</div>
        <a class="btn btn-primary rt" href="${pageContext.request.contextPath}/myShareOrder.tq" style="margin-right:6px;">我的空间</a>

    </div>

    <script type="text/javascript" src="js/wangEditor.min.js"></script>
    <script>
    	//激活  富文本编辑器
        var E = window.wangEditor;
        var editor2 = new E('#section');
        editor2.customConfig.uploadImgShowBase64 = true ;
        editor2.create();
        $('#section').children('div').eq(1).css({height:"160px",backgroundColor:'#FFF'});
        $('#section').children('div').eq(1).children('div').css({color:'#000'});
		
        //用户点击取消的时候   跳转至首页
        function toIndex(){
        	location.href="${pageContext.request.contextPath}/youge.tq";
        }
        
        
		//为  header部分商品图片添加单机事件
        $("#order>ul>li").each(function(){
            $(this).click(function(){
                $("#order>ul>li").each(function(){
                    $(this).removeClass('here');
                    $(this).css({
                        borderColor:'#FFF'
                    });
                });
                $(this).addClass('here');
                $(this).css({
                    borderColor:'#e4393c'
                });
            })
        });

	//为用户 已经上传了的图片  添加单击事件
	function saveImg(attr){
		alert(attr);
		$("[src='"+attr+"']").each(function(){
			
			var t=$(this).parent();
            t.click(function(){
                $("#saveImg>li").each(function(){
                    $(this).removeClass('here');
                    $(this).css({
                        borderColor:'#FFF'
                    });
                    $(this).children('p').css({display:'none'})
                });
                $(this).addClass('here');
                $(this).css({
                    borderColor:'#e4393c'
                });
                $(this).children('p').css({display:'block'})
            })
        });

	}
	
	
	//将 头像信息入库
	function saveTX(res){
		 $.ajax({
			    type:"post",
			    url:"${pageContext.request.contextPath}/saveTX.tq",
			    data:{txImg:res,uid:"${user.uid }"},
			    success:function(res){
			      console.log(res);
			      if(res == "true"){
			    	  alert("头像上传成功！");
			      }else{
			    	  alert("头像上传失败");
			      }
			    },
			    error:function(res){
			      alert(res);
			    }
			  })
	}
	
	
	//删除 用户在晒单模块中的（已经上传的图片）
	function deleteImg(attr){
		$("[src='"+attr+"']").each(function(){
			 $(this).next('p').click(function(){
				 alert($(this));
				  $.ajax({
					    type:"post",
					    url:"${pageContext.request.contextPath}/deleteImg.tq",
					    data:{fileName:attr},
					    success:function(res){
					      console.log(res);
					      if(res == "true"){
					    	  alert("图片删除成功！");
					    	  removeImg()
					      }else{
					    	  alert("图片删除失败");
					      }
					    },
					    error:function(res){
					      alert(res);
					    }
					  })
            })
        });

	}
        // 上传用户在晒单模块中  的图片
        function uplodeImg(){
        	alert("asasas");
        	var option = {
        			url:"${pageContext.request.contextPath}/uplodeImg.tq",//一旦指定了url那么表单中的action的url就被覆盖了，如果不指定url就用表单的原有的url
        			dataType:"text",
        			data:{
        				fileName:"imgsFile"
        			},
        			success:function(responseText){
        				//把json格式的字符串解析成json对象
        				var jsonObj = $.parseJSON(responseText);
        				if(jsonObj.relativePath == "error"){
        					alert("请选择文件");
        					return;
        				}
        				$("#saveImg").append(
        				'<li><img class="ii" src="${pageContext.request.contextPath}'+'/'+jsonObj.relativePath+'" width="100" height="100" alt=""/><p style="display: none;">×</p></li>'
        				);    
        				saveImg("${pageContext.request.contextPath}"+'/'+jsonObj.relativePath);
        				deleteImg("${pageContext.request.contextPath}"+'/'+jsonObj.relativePath);
        			},
        			error:function(){
        				alert("系统错误");
        			}
        	};
        	$("#forms").ajaxSubmit(option);
        }
        
        //上传头像 图片
        function tx(){
        	alert("上传头像");
        	var option = {
        			url:"${pageContext.request.contextPath}/uplodeImg.tq",//一旦指定了url那么表单中的action的url就被覆盖了，如果不指定url就用表单的原有的url
        			dataType:"text",
        			data:{
        				fileName:"imgsFile"
        			},
        			success:function(responseText){
        				//把json格式的字符串解析成json对象
        				var jsonObj = $.parseJSON(responseText);
        				if(jsonObj.relativePath == "error"){
        					alert("请选择文件");
        					return;
        				}
        				//$(".mark").html('<img id="touxiang" width="90" height="90" style="border-radius:50%;" title="头像" src="'+jsonObj.relativePath+'?d='+new Date()+'">');
        				saveTX(jsonObj.relativePath);
        				//$(".mark").css("background-image","url("+jsonObj.relativePath+")")
        				$("#touxiang").attr('src',jsonObj.relativePath+"?d="+new Date());
        				alert($("#touxiang").attr('src'));
        				
        			},
        			error:function(){
        				alert("系统错误");
        			}
        	};
        	$("#tx").ajaxSubmit(option);
        }
        
        //获取 订单ID 产品ID 规格
        function getorderdetail(){
        	var od={};
        	var b=false;
        	$("#order>ul>li").each(function(){
        		
        		console.log($(this).attr('class')=="here");
        		if($(this).attr('class')=="here"){
        			od.soOrderid=$(this).children('#soOrderid').val();
        			od.soProid=$(this).children('#soProid').val();
        			od.soSpec=$(this).children('#soSpec').val();
        			od.soProname=$(this).children('#soProname').val();
        			b=true;
        			return od;
        		}
        	})
        	if(!b){
        		alert("请选择 您要晒出的商品");
        	}
        	return od;
        }
        
        //用户  提交晒单信息
        function tj(){
        	var o=getorderdetail();
        	if(o == null || !o){
        		return;
        	}
        	  $.ajax({
				    type:"post",
				    url:"${pageContext.request.contextPath}/submit.tq",
				    data:{
				    	soOrderid:o.soOrderid,
				    	soProid:o.soProid,
				    	soSpec:o.soSpec,
				    	soImg:getImgPath(),
				    	soMsg:editor2.txt.html(),
				    	soProname:o.soProname
				    },
				    success:function(res){
				      console.log(res);
				      if(res == "true"){
				    	  alert("恭喜您  晒单成功！");
				      }else{
				    	  alert("提交失败");
				      }
				    },
				    error:function(res){
				      alert(res);
				    }
				  })
        }
        //获取用户已经上传了的 图片相对路径  方便入库
        function getImgPath(){
        	var path="";
            $(".ii").each(function(){
            	path+=$(this).attr('src').substr($(this).attr('src').indexOf("upload/"))+';'
            });
            console.log("db: "+path);
            return path;
        }


		// 用户  删除已上传的图片
        function removeImg(){
        	console.log($("#saveImg>li.here"));
            $("#saveImg>li.here").remove();
        }


    </script>

</body>
</html>